<template>
  <view class="charts-box">
    <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      // 您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: [
          '#3CA272',
          '#91CB74',
          '#FAC858',
          '#EE6666',
          '#73C0DE',
          '#3CA272',
          '#FC8452',
          '#9A60B4',
          '#ea7ccc',
        ],
        padding: [15, 10, 0, 15],
        dataLabel: false,
        dataPointShape: false,
        // enableScroll: false,
        legend: {},
        // xAxis: {
        //   disableGrid: true,
        //   // itemCount: 4,
        //   // axisLine: false,
        //   // scrollShow:true,
        //   // scrollAlign:'right'
        // },
        xAxis: {
          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          axisLine: false,
          disabled: true,
        },
        yAxis: {
          gridType: 'dash',
          // dashLength: 2,
          disableGrid: true,
          disabled: true,
          data: [
            {
              // min: 0,
              // max: 150
            },
          ],
        },
        extra: {
          // line: {
          //   type: "curve",
          //   width: 2,
          //   activeType: "hollow",
          //   linearType: "custom"
          // }
        },
      },
    }
  },
  mounted() {
    this.getServerData()
  },
  methods: {
    getServerData() {
      // 模拟从服务器获取数据时的延时
      setTimeout(() => {
        // 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        const res = {
          categories: [
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
            '',
          ],
          series: [
            {
              name: '',
              linearColor: [
                [0, '#00E6BB'],
                [0.25, '#00B5FF'],
                [0.5, '#00D1ED'],
                [0.75, '#00E6BB'],
                [1, '#90F489'],
              ],
              data: [
                1000, 1559, 45, 10005, 450, 2600, 5000, 10000, 400, 2000, 10000, 2000, 1000, 111,
                20, 12, 15126, 161,
              ],
            },
          ],
        }
        this.chartData = JSON.parse(JSON.stringify(res))
      }, 500)
    },
  },
}
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 200px;
}
</style>
